<template>
  <div class="mod-sp__spmatchitemteam">
    <el-form :inline="true" :model="dataForm" @keyup.enter="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.teamName" placeholder="代表队名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.realName" placeholder="姓名" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.ticket" placeholder="证件编号" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="dataForm.groupId" placeholder="组别" style="width: 150px">
          <el-option key="100301" label="小学组" value="100301"></el-option>
          <el-option key="100302" label="初中组" value="100302"></el-option>
          <el-option key="100303" label="高中组" value="100303"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="地区" prop="province">
        <el-select style="width: 150px" placeholder="请选择" v-model="dataForm.province" @change="selectCity">
          <el-option value="" label="全国">全国</el-option>
          <el-option v-for="itemO in area.item" :key="itemO.code" :label="itemO.name" :value="itemO.code"> </el-option>
        </el-select>
        ~
        <el-select style="width: 150px" placeholder="请选择" v-model="dataForm.city">
          <el-option value="" label="全部">全部</el-option>
          <el-option v-for="itemO in areaCity.item" :key="itemO.code" :label="itemO.name" :value="itemO.code"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">{{ $t("query") }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="primary" @click="zhengshuHandle()">下载参赛证</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="primary" v-if="dataForm.type == '2'" @click="haomaHandle()">下载号码布</el-button>
      </el-form-item>

      <!--
      <el-form-item>
        <el-button type="info" @click="exportHandle()">{{ $t("export") }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="hasPermission('sp:spmatchitemteam:save')" type="primary" @click="addOrUpdateHandle()">{{ $t("add") }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="hasPermission('sp:spmatchitemteam:delete')" type="danger" @click="deleteHandle()">{{ $t("deleteBatch") }}</el-button>
      </el-form-item>
      -->
    </el-form>

    <div v-if="dataList && dataList.length > 0" style="margin-bottom: 10px">
      <el-tag size="big">{{ dataList ? dataList[0].matchName : "" }}</el-tag>
      <el-tag size="big" style="margin-left: 5px">{{ dataForm.matchItemName ? dataForm.matchItemName : "" }}</el-tag>
    </div>
    <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%">
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <!--
      <el-table-column prop="id" label="ID" header-align="center" align="center"></el-table-column>
      -->
      <el-table-column prop="teamName" label="代表队" header-align="center" align="center"></el-table-column>
      <el-table-column prop="province" label="地区" header-align="center" align="center"></el-table-column>
      <el-table-column prop="realName" label="选手姓名" header-align="center" align="center"></el-table-column>
      <el-table-column prop="company" label="学校/单位" header-align="center" align="center"></el-table-column>
      <el-table-column prop="ticket" label="选手编号" header-align="center" align="center"></el-table-column>
      <el-table-column label="参赛证" fixed="right" header-align="center" align="center" width="150">
        <template v-slot="scope">
          <el-button type="text" size="small" v-if="scope.row.entryPic" @click="infoHandle(scope.row.entryPic)">查看</el-button>
          <el-button type="text" size="small" v-if="scope.row.entryPic" @click="infoHandle(scope.row.entryPic)">下载</el-button>
        </template>
      </el-table-column>
      <el-table-column label="号码布" fixed="right" header-align="center" align="center" width="150">
        <template v-slot="scope">
          <el-button type="text" size="small" v-if="scope.row.numberPic" @click="infoHandle(scope.row.numberPic)">查看</el-button>
          <el-button type="text" size="small" v-if="scope.row.numberPic" @click="infoHandle(scope.row.numberPic)">下载</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle"> </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>

<script lang="ts">
import useView from "@/hooks/useView";
import { defineComponent, reactive, toRefs } from "vue";
import AddOrUpdate from "./spmatchitemteam-add-or-update.vue";
import baseService from "@/service/baseService";
import app from "@/constants/app";
import qs from "qs";
import { getToken } from "@/utils/cache";
export default defineComponent({
  components: {
    AddOrUpdate
  },
  setup() {
    const state = reactive({
      getDataListURL: "/sp/spticket/queryTicketBy",
      createdIsNeed: false,
      activatedIsNeed: false,
      getDataListIsPage: true,
      exportURL: "/sp/spmatchitemteam/export",
      deleteURL: "/sp/spmatchitemteam",
      deleteIsBatch: true,
      dataForm: {
        teamName: "",
        matchId: "",
        matchItemId: "",
        matchItemName: "",
        status: "",
        province: "",
        city: "",
        type: "",
        realName: "",
        ticket: "",
        groupId: ""
      },
      colData: [
        { title: "score1", istrue: false },
        { title: "score2", istrue: false }
      ],
      area: { code: "0", item: [{ code: "0", name: "请选择" }] },
      areaCity: { code: "0", item: [{ code: "0", name: "请选择" }] },
      activeName: "first"
    });
    return { ...useView(state), ...toRefs(state) };
  },
  watch: {},
  created() {
    this.areaList(this.area);
  },
  mounted() {
    //获取上个页面传来的赛事id
    this.dataForm.matchId = this.$route.query.id + "";
    this.dataForm.matchItemId = this.$route.query.matchItemId ? this.$route.query.matchItemId + "" : null;
    this.dataForm.matchItemName = this.$route.query.matchItemName ? this.$route.query.matchItemName + "" : null;
    console.log(this.dataForm.matchItemId);

    //1领队  2选手
    this.dataForm.type = this.$route.query.type + "";
    this.query();
  },
  methods: {
    // 获取省份
    areaList(target: any) {
      baseService.get("/front/fast/sys/areaDict/list?pid=" + target.code).then((e: any) => {
        target.item = e.data;
      });
    },
    // 选择城市
    selectCity() {
      if (this.dataForm.province) {
        this.areaCity.code = this.dataForm.province;
        this.areaList(this.areaCity);
      } else {
        this.dataForm.city = "";
        this.areaCity.item = [];
      }
    },
    // 异常信息
    infoHandle(info: string) {
      window.open(info);
    },
    // 调用后台方法rise，晋级当前参赛小组
    riseHandle(id?: string) {
      this.$confirm("确认晋级？", this.$t("prompt.title"), {
        confirmButtonText: this.$t("confirm"),
        cancelButtonText: this.$t("cancel"),
        type: "warning"
      }).then(() => {
        baseService.post("/sp/spmatchitemteam/rise", { id: id, status: "1" }).then((res) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.query();
          }
        });
      });
    },
    passHandle(id?: string) {
      this.$confirm("确认审核通过？", this.$t("prompt.title"), {
        confirmButtonText: this.$t("confirm"),
        cancelButtonText: this.$t("cancel"),
        type: "warning"
      }).then(() => {
        baseService.post("/sp/spmatchitemteam/pass", { id: id }).then((res) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.query();
          }
        });
      });
    },
    zhengshuHandle() {
      let ids: string[] = [];
      for (let i = 0; i < this.dataListSelections!.length; i++) {
        ids.push(this.dataListSelections![i].id);
      }
      window.open(
        `${app.api}/sp/spticket/downloadFile?${qs.stringify({
          ...this.dataForm,
          token: getToken(),
          ids: ids.join(","),
          picType: "1" // 1参赛证 2号码布
        })}`
      );
    },
    haomaHandle() {
      let ids: string[] = [];
      for (let i = 0; i < this.dataListSelections!.length; i++) {
        ids.push(this.dataListSelections![i].id);
      }
      window.open(
        `${app.api}/sp/spticket/downloadFile?${qs.stringify({
          ...this.dataForm,
          token: getToken(),
          ids: ids.join(","),
          picType: "2" //1参赛证 2号码布
        })}`
      );
    },
    handleClick(tab: any, event: any) {
      // 跳转页面
      this.$router.push({
        path: "/sp/spuserticketGroup",
        query: {
          id: this.$route.query.id,
          type: tab.name
        }
      });
    }
  }
});
</script>
